<template>
  <div>
    <router-link :to="{ path: '/index.html' }">
      <img src="http://rxbm.csedu.gov.cn/imgs/logo2.png" />
    </router-link>
    <p class="header_new_right">
      <router-link :to="{ path: '/index.html' }" :class="{ on: index == 1 }"
        >首页</router-link
      >
      <router-link
        :to="{ path: '/news/first.html' }"
        :class="{ on: index === 2 }"
        >政策解读</router-link
      >
      <router-link
        :to="{ path: '/index_manual.html' }"
        :class="{ on: index === 3 }"
        >操作指南</router-link
      >
      <button class="btn_login_new" @click="updateLRDialog()">登录</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      index: 1,
    };
  },

  mounted() {
    this.changeSelected();
  },

  methods: {
    changeSelected() {
      let path = "";
      if (arguments.length == 1) path = arguments[0];
      else path = this.$route.path;
      if (path.endsWith("/index.html") || path.endsWith("/")) this.index = 1;
      else if (path.includes("/news/")) this.index = 2;
      else if (path.endsWith("/index_manual.html")) this.index = 3;
      console.log("当前路由:", path, this.index);
    },
    /**
     * 修改登录弹框状态的方法
     */
    updateLRDialog() {
      this.$store.commit("updateLD", "block");
      console.log("block", this.$store.state.lblock);
    },
  },
  watch: {
    $route(to) {
      /**
       * 使用这个钩子函数的时候路由父路由没有变化，还是会重新加载mounted
       * 要不然就不会重新mounted调用
       */
      console.log("watch:", to.path);
      this.changeSelected(to.path);
    },
  },
};
</script>

<style scoped>
img {
  position: relative;
  top: 10px;
}
</style>